<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'客户拜访分析',liner:true}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content">
					<view class="nostrongtext" @click="pop_show=true">筛选</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding_top">
			<view class="strongtext">
				<text class="titletext textliner">数据分析</text>
			</view>
			<view class="flexleft margin_top ffffff radius">
				<view class="charts-box" style="flex: 2;">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
				</view>
				<view class=" flexcolumn" style="flex: 1.5;">
					<view class="titletext">客户总数:{{allmsg.custom_num}}个</view>
					<view class="flexstart margin_top">
						<view class="baifang"></view>
						<view class="ringtcontent">
							<view class="allnum">拜访客户数</view>
							<view class="strongtext flexleft">
								<view class="margin_right">{{allmsg.today_visit_num}}</view>
								<view>{{allmsg.today_visit_rate}}%</view>
							</view>
						</view>
					</view>
					<view class="flexstart margin_top">
						<view class="nobaifang"></view>
						<view class="ringtcontent">
							<view class="allnum">未拜访客户数</view>
							<view class="strongtext flexleft">
								<view class="margin_right">{{allmsg.today_no_visit_num}}</view>
								<view>{{Number(allmsg.today_no_visit_rate)}}%</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 详细数据 -->
			<view class="strongtext margin_top">
				<text class="titletext textliner">详细数据</text>
			</view>
			<view class="ffffff radius tablecontent margin_top">
				<view class="flexcenter tabheadtext">
					<view style="flex: 3;" class="flexcenter">日期</view>
					<view style="flex: 4;" class="flexcenter">拜访客户数</view>
					<view style="flex: 3;" class="flexcenter">比例</view>
				</view>
				<view class="flexcenter margin_top strongtext">
					<view style="flex: 3;" class="flexcenter">今日</view>
					<view style="flex: 4;" class="flexcenter">{{allmsg.today_visit_num}}</view>
					<view style="flex: 3;" class="flexcenter">{{Number(allmsg.today_visit_rate).toFixed(2)}}%
					</view>
				</view>
				<view class="flexcenter margin_top strongtext">
					<view style="flex: 3;" class="flexcenter">昨日</view>
					<view style="flex: 4;" class="flexcenter">{{allmsg.zr_visit_num}}</view>
					<view style="flex: 3;" class="flexcenter">
						{{Number(allmsg.zr_visit_rate).toFixed(2)}}%
					</view>
				</view>
				<view class="flexcenter margin_top strongtext">
					<view style="flex: 3;" class="flexcenter">前天</view>
					<view style="flex: 4;" class="flexcenter">{{allmsg.qr_visit_num}}</view>
					<view style="flex: 3;" class="flexcenter">
						{{Number(allmsg.qr_visit_rate).toFixed(2)}}%
					</view>
				</view>
				<view class="flexcenter margin_top strongtext">
					<view style="flex: 3;" class="flexcenter">上周</view>
					<view style="flex: 4;" class="flexcenter">{{allmsg.sz_visit_num}}</view>
					<view style="flex: 3;" class="flexcenter">
						{{Number(allmsg.sz_visit_rate).toFixed(2)}}%
					</view>
				</view>
				<view class="flexcenter margin_top strongtext">
					<view style="flex: 3;" class="flexcenter">本周</view>
					<view style="flex: 4;" class="flexcenter">{{allmsg.bz_visit_num}}</view>
					<view style="flex: 3;" class="flexcenter">
						{{Number(allmsg.bz_visit_rate).toFixed(2)}}%
					</view>
				</view>
				<view class="flexcenter margin_top strongtext">
					<view style="flex: 3;" class="flexcenter">上月</view>
					<view style="flex: 4;" class="flexcenter">{{allmsg.sy_visit_num}}</view>
					<view style="flex: 3;" class="flexcenter">
						{{Number(allmsg.sy_visit_rate).toFixed(2)}}%
					</view>
				</view>
				<view class="flexcenter margin_top strongtext">
					<view style="flex: 3;" class="flexcenter">本月</view>
					<view style="flex: 4;" class="flexcenter">{{allmsg.by_visit_num}}</view>
					<view style="flex: 3;" class="flexcenter">
						{{Number(allmsg.by_visit_rate).toFixed(2)}}%
					</view>
				</view>
				<view class="flexcenter margin_top strongtext">
					<view style="flex: 3;" class="flexcenter">上年</view>
					<view style="flex: 4;" class="flexcenter">{{allmsg.sn_visit_num}}</view>
					<view style="flex: 3;" class="flexcenter">
						{{Number(allmsg.sn_visit_rate).toFixed(2)}}%
					</view>
				</view>
				<view class="flexcenter margin_top strongtext">
					<view style="flex: 3;" class="flexcenter">今年</view>
					<view style="flex: 4;" class="flexcenter">{{allmsg.jn_visit_num}}</view>
					<view style="flex: 3;" class="flexcenter">
						{{Number(allmsg.jn_visit_rate).toFixed(2)}}%
					</view>
				</view>
			</view>
		</view>
		<u-popup round="20" :show="pop_show" @close="pop_show=false">
			<view class="mainpadding_top ffffff">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<view class="itemscreen flexleft margin_top"
					@click="selectRole('/pages/workbench/jiben/yuangongda?type=2')">
					<view class="strongtext minwidth">员工</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择员工" v-model="staff_name">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="itemscreen flexleft margin_top" @click="khPianQuShow=true">
					<view class="strongtext minwidth">片区</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择片区" v-model="khPianQuText">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="sureBtn">确认</view>
				</view>
			</view>
		</u-popup>
		<selectKHPianQu :message="{khPianQuShow:khPianQuShow}" @khPianQuSure="khPianQuSure"></selectKHPianQu>
		<!-- 客户片区 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				// 环形图
				chartData: {},
				allmsg: {},
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#F3AD3D", "#13BFCC", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 0, 0, 0],
					dataLabel: true,
					legend: { //图例配置
						show: false, //是否显示图例配置
						fontColor: "#fff", //字体颜色
						position: "top",
						float: "right",
					},
					title: {
						name: '0',
						fontSize: 15,
						color: "#0BBDCB"
					},
					subtitle: {
						name: "今日拜访率",
						fontSize: 10,
						color: "#333"
					},
					extra: {
						ring: {
							labelWidth: 1,
							ringWidth: 15,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
				pop_show:false,
				pageShow: false,
				staff_id: "", //业务员
				staff_name: "",
				khPianQuShow: false,
				khPianQuText: "",
				custom_area_id: "", //客户片区ID
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				this.staff_id = data.id
				this.staff_name = data.name
				return false
			})
		},
		methods: {
			selectRole(url) {
				uni.navigateTo({
					url
				})
			},
			close() {
				this.pop_show = false
			},
			init() {
				httpRequest.request('/dhtapi/custom/customVisitFx', 'POST', {
					staff_id: this.staff_id,
					custom_area_id: this.custom_area_id,
				}).then(res => {
					this.allmsg = res.data
					let msg = {
						series: [{
							data: [{
									"name": "拜访客户数",
									"value": 0,
									"labelShow": false
								},
								{
									"name": "未拜访客户数",
									"value": 0,
									"labelShow": false //是否展示角标
								}
							]
						}]
					};
					msg.series[0].data[0].value = this.allmsg.today_visit_num
					msg.series[0].data[1].value = this.allmsg.custom_num - this.allmsg.today_visit_num
					this.opts.title.name = this.allmsg.today_visit_rate + "%"
					this.chartData = JSON.parse(JSON.stringify(msg));
					this.pageShow = true
				})
			},
			khPianQuSure(e) { //客户片区
				if (e) {
					this.khPianQuText = e.value[0].name
					this.custom_area_id = e.value[0].id
				}
				this.khPianQuShow = false
			},
			// 重置
			resetbtn() {
				this.staff_id = "" //业务员
				this.staff_name = ""
				this.khPianQuText = ""
				this.custom_area_id = "" //仓库片区id
				this.init()
				this.pop_show = false
			},
			sureBtn() {
				this.init()
				this.pop_show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 筛选样式开始
	.surebtn {
		width: 45%;
	}
	
	.reset {
		background: #ebb563;
	}
	.minwidth{
		min-width: 130rpx;
	}
	.rightscreen{
		width: 100%;
	}
	.itemscreen{
		padding-bottom: 20rpx;
	}
	// 筛选样式结束
	.charts-box {
		width: 50%;
		height: 300rpx;
	}

	// 图标右边内容
	.maincolor_text {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
	}

	.baifang {
		margin-right: 15rpx;
		width: 24rpx;
		height: 24rpx;
		border-radius: 10rpx;
		background-color: #F3AD3D;
	}

	.nobaifang {
		margin-right: 15rpx;
		width: 24rpx;
		height: 24rpx;
		border-radius: 10rpx;
		background-color: #13BFCC;
	}

	.allnum {
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 20rpx;
		margin-bottom: 15rpx;
	}

	.ringtcontent {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: column;
	}

	// 表格
	.tablecontent {
		padding: 30rpx 0 30rpx 0;
	}

	.tabheadtext {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}
</style>